<template>
	<view class="paihang">
		<ul class="flex">
			<li :class=" navIndex==0 ? 'activite': '' " @click='chenger(0)'>总排行榜</li>
			<li :class=" navIndex==1 ? 'activite': '' "  @click='chenger(1)'>今日排行</li>
		</ul>
		<view class="content" >
			<view class="pai">
				今日排名：未上榜
			</view>
			<view class="contens flex"  v-for="(item,index) in datas" :key="index"  v-if="navIndex==0"> 
				<view class="contens-left flex" >
					<view class="left-1">{{index+1}}</view>
					<view class="left-2"><image :src="item.src" mode="widthFix"></image></view>
					<view class="left-3">
					 <view class="">{{item.name}}</view>	
					 <view class="">{{item.day}}</view>
					</view>
				</view>
				<view class="contens-right">{{item.kilometre}}</view>
			</view>	
			<view class="contens flex"  v-for="(item,index) in datas2" :key="index"  v-if="navIndex==1">
				<view class="contens-left flex" >
					<view class="left-1">{{index+1}}</view>
					<view class="left-2"><image :src="item.src" mode="widthFix"></image></view>
					<view class="left-3">
					 <view class="">{{item.name}}</view>	
					 <view class="">{{item.day}}</view>
					</view>
				</view>
				<view class="contens-right">{{item.kilometre}}</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				navIndex:0,
				datas:[
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'}
				],
				datas2:[
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'},
					{name:'赵伟博',src:'../../static/logo.png',day:"累计421天",kilometre:'1143873.5公里'}
					
				]
				
			}
		},
		methods:{
			chenger:function(index){
				this.navIndex = index
			}
			
		},
		onLoad() {
			
		},
	}
	
	
</script>

<style>
	*{margin: 0 ;padding: 0;font-size: 12px;}
	ul{width: 100%;position: fixed;}
	li{width:50%;text-align: center;line-height: 40px;background-color: #fff;}
	.content{padding:50px 0;background-color:#f7f2f2;text-align: center;}
	.pai{font-size: 11px;margin-bottom: 10px;color: #666;}
	.flex{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.contens{width: 90%;margin:0 auto;background-color: #fff;border-radius: 10px;padding: 10px 5px;box-sizing: border-box;margin-bottom: 10px;}
	.contens-left{width:40%;}
	.left-1{width: 10%;}
	.left-2{width: 30%;}
	.left-2 image{width: 100%;display: block;border-radius: 50%;}
	.left-3{width:50%;font-size:0.8rem;}
	.contens-right{color: #f00;font-size: 12px;}
	.activite{border-bottom: 1px solid #f00;}
</style>